<template>
    <div class="mt-3">
        <div class="font-bold flex items-center justify-between">
            <span>{{ toZhDigit(i + 1) }}、</span>
            <el-button @click="deleteQuestion" type="danger" size="small">删除</el-button>
        </div>
        <el-form ref="formRef" :model="global.question" label-width="80" class="mt-3">
            <el-form-item label="大题名称" prop="name">
                <el-input v-model="global.question.name" placeholder="请输入" class="w-full" />
            </el-form-item>
            <el-form-item label="总分" class="mt-3">
                <el-input :value="total" disabled placeholder="自动计算" class="w-full" />
            </el-form-item>
            <el-form-item label="每题分数" prop="everyoneScore" class="mt-3">
                <el-input-number @change="onChange" :min="0" v-model="global.question.everyoneScore" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="难度" prop="difficulty" class="mt-3">
                <el-input-number :min="1" v-model="global.question.difficulty" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="题目类型" prop="type" class="mt-3">
                <el-select v-model="global.question.type" placeholder="请选择题目类型">
                    <el-option 
                    v-for="item in props.questionsTypeList" 
                    :key="item.id"
                    :label="item.label"
                    :value="item.id" 
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="小题列表" prop="questionsIdList" class="mt-3">
                <el-select-v2
                v-model="global.question.questionsIdList"
                placeholder="可多选" 
                clearable
                multiple
                :filterable="true"
                :options="topicListFilter"
                @change="onChange"
                class="w-full"
                />
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, watch, ref } from 'vue';
import { toZhDigit} from '@/Utils/utils';
import type { TopicTypeNumber } from '@/Utils/type';
import type { FormInstance } from 'element-plus';

const formRef = ref<FormInstance>();

interface Questions {
    everyoneScore: number;
    id: number;
    name: string;
    difficulty: string | number;
    questionsIdList: number[];
    sort?: number;
    type: string | TopicTypeNumber;
}

const emit = defineEmits(['change', 'update:modelValue', 'delete']);

const props = defineProps<{
    modelValue: Questions;
    topicList: any[];
    i: number;
    questionsTypeList: any[];
}>();

const global = reactive({
    question: props.modelValue,
});

const topicListFilter = computed(() => props.topicList.filter(item => !global.question.type || item.type == global.question.type));

const total = computed(() => {
    const total = global.question.everyoneScore * (global.question.questionsIdList || []).length;
    if (total == 0) return '';
    return total;
});

const onChange = () => {
    // console.log(global.question)
    emit('update:modelValue', global.question);
    emit('change', global.question);
};

defineExpose({
    validate: () => formRef.value?.validate()
});

const deleteQuestion = () => emit('delete');

watch(
    () => props.modelValue,
    () => {
        global.question = props.modelValue
    },
    {
        deep: true
    }
);
</script>